<template>
  <!--视图容器-->
  <el-container>
    <!--主要引用页面-->
    <el-main>
      <div ref="formBox" class="formBox">
        <el-form ref="params" :inline="true" :model="params" size="small">
          <el-form-item label="表单编号" prop="FormCode">
            <el-input
              v-model="params.FormCode"
              clearable
              placeholder="请输入表单编号"
            />
          </el-form-item>
          <el-form-item label="表单名称" prop="FormName">
            <el-input
              v-model="params.FormName"
              clearable
              placeholder="请输入表单名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick"
              >查询</el-button
            >
            <el-button
              type="primary"
              plain
              icon="el-icon-refresh"
              @click="resetClick('params')"
              >重 置</el-button
            >
            <el-button
              type="success"
              icon="el-icon-circle-plus"
              @click="FormAdd"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="myTable"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        stripe
        :data="tableData"
        border
        style="width: 100%"
        :height="tableHeight"
      >
        <el-table-column type="index" align="center" label="序号" width="80" />
        <el-table-column
          align="left"
          show-overflow-tooltip
          prop="FormCode"
          label="表单编号"
          width="200"
        />
        <el-table-column
          align="left"
          show-overflow-tooltip
          prop="FormName"
          label="表单名称"
          width="300"
        />
        <el-table-column
          align="left"
          show-overflow-tooltip
          prop="FormVersion"
          label="表单版本号"
          min-width="300"
        />
        <el-table-column
          align="right"
          show-overflow-tooltip
          prop="FormSort"
          label="表单序号"
          width="140"
        />
        <el-table-column
          align="left"
          show-overflow-tooltip
          prop="FormRemark"
          label="表单备注"
          min-width="300"
        />
        <!-- <el-table-column align="center" label="是否启用" width="140px">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isenable"
              active-text=""
              inactive-text=""
              :active-value="1"
              :inactive-value="2"
              @change="isenable(scope.row.id, scope.row.isenable)"
            />
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center" width="330">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              icon=""
              @click="handleDesign(scope.row)">设计</el-button>
            <el-button
              icon="el-icon-edit-outline"
              size="mini"
              type="primary"
              @click="handleEdit(scope.row)"
              >编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        :page-size="params.size"
        :current-page="params.page"
        :page-sizes="[15, 20, 25, 30]"
        style="margin-top: 15px"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-main>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="35%"
      @close="close"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="表单编号" prop="FormCode">
          <el-input
            v-model="form.FormCode"
            clearable
            placeholder="请输入表单编号"
          />
        </el-form-item>
        <el-form-item label="表单名称" prop="FormName">
          <el-input
            v-model="form.FormName"
            clearable
            placeholder="请输入表单名称"
          />
        </el-form-item>

        <el-form-item label="表单版本号" prop="FormVersion">
          <el-input
            v-model="form.FormVersion"
            clearable
            placeholder="请输入表单版本号"
          />
        </el-form-item>
        <el-form-item label="表单序号" prop="FormSort">
          <el-input
            v-model="form.FormSort"
            clearable
            placeholder="请输入表单序号"
          />
        </el-form-item>

        <el-form-item label="表单备注" prop="FormRemark">
          <el-input
            v-model="form.FormRemark"
            type="textarea"
            :rows="4"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="onSubmit('form')"
          >保 存</el-button
        >
      </span>
    </el-dialog>
    <!--主要引用页面结束-->
  </el-container>
  <!--内容结束-->
</template>
<script>
export default {
  name: "FormList",
  data() {
    return {
      form: {
        FormCode: "",
        FormName: "",
        FormVersion: "",
        FormRemark: "",
        FormSort: "",
      },
      rules: {
        FormCode: [{ required: true, trigger: "blur", message: "请输入表单编号" }],
        FormName: [
          { required: true, trigger: "blur", message: "请输入表单名称" },
        ],
        FormVersion: [
          { required: true, trigger: "blur", message: "请输入表单版本号" },
        ],
      },
      loading: false,
      title: "",
      dialogVisible: false,
      tableHeight: null,
      tableData: [],
      params: {
        FormCode: "",
        FormName: "",
        page: 1,
        size: 15,
      },
      total: 0,
      listLoading: false,
    };
  },
  mounted() {
    const ythHeader = document.getElementsByClassName("fixed-header")[0];
    const clientHeight = ythHeader ? ythHeader.clientHeight : 0;
    this.tableHeight =
      window.innerHeight -
      this.$refs.formBox.offsetHeight -
      102 -
      clientHeight -
      (window.$wujie ? window.$wujie.props.layoutHeight : 0);
    window.onresize = () => {
      return (() => {
        this.tableHeight =
          window.innerHeight -
          this.$refs.formBox.offsetHeight -
          102 -
          clientHeight -
          (window.$wujie ? window.$wujie.props.layoutHeight : 0);
      })();
    };
  },
  created() {
    // this.getList();
    this.tableData.push({
        FormCode: "formOA",
        FormName: "请假表单",
        FormVersion: "1.0.0.0",
        FormRemark: "请假申请",
        FormSort: "1",
    })
  },
  methods: {
    close() {
      this.$refs["form"].resetFields();
    },
    getList() {
    //   this.listLoading = true;
    //   activityQueryBy(this.params)
    //     .then((res) => {
    //       this.listLoading = false;
    //       if (res.success && res.data) {
    //         this.tableData = res.data.rows;
    //         this.$refs.myTable.doLayout();
    //         this.total = res.data.total;
    //       } else {
    //         this.total = 0;
    //         this.tableData = [];
    //       }
    //     })
    //     .catch(() => {
    //       this.listLoading = false;
    //     });
    },
    isenable(id, type) {
      var params = {
        id: id,
        isenable: type,
      };
      isenable(params).then((res) => {
        if (res.success) {
          this.getList();
          this.$message({
            message: "设置成功！",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg || "设置失败!",
            type: "error",
          });
        }
      });
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        //   this.loading = true;
        //   if (this.form.id) {
        //     activityUpdate(this.form)
        //       .then((res) => {
        //         this.loading = false;
        //         if (res.success) {
        //           this.$message({
        //             message: "保存成功!",
        //             type: "success",
        //           });
        //         } else {
        //           this.$message({
        //             message: res.msg || "保存失败!",
        //             type: "error",
        //           });
        //         }
        //         this.dialogVisible = false;
        //         this.getList();
        //       })
        //       .catch((err) => {
        //         console.log(err);
        //         this.loading = false;
        //       });
        //   } else {
        //     activitySave(this.form)
        //       .then((res) => {
        //         this.loading = false;
        //         if (res.success) {
        //           this.$message({
        //             message: "保存成功!",
        //             type: "success",
        //           });
        //         } else {
        //           this.$message({
        //             message: res.msg || "保存失败!",
        //             type: "error",
        //           });
        //         }
        //         this.dialogVisible = false;
        //         this.getList();
        //       })
        //       .catch((err) => {
        //         console.log(err);
        //         this.loading = false;
        //       });
        //   }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增
    FormAdd() {
      this.title = "新增表单";
      this.dialogVisible = true;
      this.form = {
        FormCode: "",
        FormName: "",
        FormVersion: "",
        FormRemark: "",
        FormSort: "",
      };
    },
    //编辑
    handleEdit(row) {
      this.title = "编辑表单";
      this.dialogVisible = true;
      this.form = {
        ...row
      };
    },
    handleDesign(row) {
        this.$emit("jump", 'App', row)
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.params.size = val;
      this.getList();
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        activityDel(id).then((res) => {
          this.$message({
            message: "删除成功！",
            type: "success",
          });
          this.getList();
        });
      });
    },
    searchClick() {
      this.getList();
    },
    resetClick(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
  },
};
</script>
<style>
/* .el-container {
  height: 100%;
  padding: 20px;
}
.el-main {
  height: 100%;
  padding: 0;
} */
</style>
